#{extends 'main.html' /}
	<div id="tudo">
		<div id="topo">
			<img src="/public/images/header.png" />
		</div>
		<div id="banner">
		</div>
		<div id="profile">
			<div id="imagem">
				<img src="${eleitor.foto}">
			</div>
			<div id="dados">
				<div id="dEsquerda">
					<p class="nome">${eleitor.nome}</p>
					${eleitor.dataNascimento}<br/>
					${eleitor.uf}<br/>
					${eleitor.genero}<br/>
				</div>
			</div>
		</div>
			<div id="politicos">
				<p class="titulo">Políticos Monitorados</p>
				<hr class="linha">
					#{list items:eleitor.politicos, as:'politico'}
					<div class="politico">
						<div class="politicoFoto">
							<img src="${politico?.foto}" height="50px" class="politicoMonitorado">
						</div>
						<div class="politicoDetail">
						<ul>
							<li><span>Nome: </span>${politico?.nome}</li>
							<li><span>Partido: </span>${politico?.partido}</li>
							<li><span>UF: </span>${politico?.uf}</li>
							#{list items:politico.eleitores, as:'eleitor_'}
							#{if eleitor_ != eleitor}
								<li><img src="${eleitor_?.foto}" class="imagem"></li>
							#{/if}
							#{/list}
						</ul>
						</div>
					</div>
					#{/list}
			</div>
			
			<div id="friends"></div>
		<div id="stream">
			<p class="titulo">Projetos</p>
			<hr class="linha">
			<ul id="listaStream">
				#{list items:materias, as:'materia'}
				<li>
					<div>
						<div class="texto">
							<p class="titulo">${materia.titulo}</p>
							<p class="pLei">${materia.descricao}</p>
							#{list items:eleitor.politicos, as:'politico'}
								#{set posicao: materia.getPosicao(politico) /}
								#{set aprovacao: materia.getAprovacao(eleitor) /}
								<img src="${politico?.foto}" class="img"> <p class="pLei">${politico?.nome} votou ${posicao}</p>
								#{if aprovacao != null}
									#{if aprovacao.concorda}
										<p class="pLei">Voc&ecirc; aprova esta decis&atilde;o</p>
									#{/if}
									#{else}
										<p class="pLei">Voc&ecirc; n&atilde;o aprova esta decis&atilde;o</p>
									#{/else}
								#{/if}
								#{else}
									<p id="posicao_${posicao.id}" class="pLei" >Voc&ecirc; aprova esta decis&atilde;o? <span onmouseover="javacript:pointer(this);" onclick="javascript:votar(${eleitor.id}, ${posicao.id}, 1);">Sim</span>|<span onmouseover="javacript:pointer(this);" onclick="javascript:votar(${eleitor.id}, ${posicao.id}, 0);">N&atilde;o</span></p>
								#{/else}
							#{/list}
						</div>
					</div>
				</li>
				#{/list}
			</ul>
		</div>	
</div>
<script>
	function pointer(element) {
		element.style.cursor = 'pointer';
	} 

	function votar(eleitorId, posicaoId, voto) {
		var f = #{jsAction @Application.vote(':eleitorId', ':posicaoId', ':voto') /};
		var ajaxParam = {url : f({eleitorId: eleitorId, posicaoId: posicaoId, voto: voto}), success: ok, dataType: 'json', type: 'GET'};
		$.ajax(ajaxParam);
	}

	function ok(a, b, c) {
		if (a.success) {
			$("#posicao_" + a.posicaoId).html('');
			if (a.voto === 1) {
				$("#posicao_" + a.posicaoId).html('Voc&ecirc; aprova esta decis&atilde;o');
			} else {
				$("#posicao_" + a.posicaoId).html('Voc&ecirc; n&atilde;o aprova esta decis&atilde;o');
			}
		}
	}
</script>